<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>

<%--男女比例饼状图--%>
<div id="container" style="height: 100%"></div>
<%--不同时间段注册用户折线图--%>
<div id="userCount" style="height: 100%"></div>
<%--国内用户数量分布图--%>
<div id="china" style="width: 600px;height:400px;"></div>

<div id="test1" style="width: 600px;height:400px;"></div>

<script type="text/javascript">
    <%--------------------男女比例饼状图开始-----------------------%>
/*    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;*/
    /*$.ajax({
        url:"${pageContext.request.contextPath}/user/selectBoysAndGirls",
        type:"get",
        async:false,
        success:function(data){
            var boys=data.boys;
            var girls=data.girls;

            option = {
                title : {
                    text: '男女人数信息展示',
                    subtext: '用户性别占比',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['男','女']
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:boys, name:'男'},
                            {value:girls, name:'女'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
        }
    });*/
/*    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }*/
    <%--------------------男女比例饼状图结束-----------------------%>

    <%--------------------不同时间段注册用户折线图开始-----------------------%>
/*    var dom1 = document.getElementById("userCount");
    var myChart1 = echarts.init(dom1);
    var app1 = {};
    var option1 = null;*/

    /*$.ajax({
        url:"${pageContext.request.contextPath}/user/selectIntervalUsers",
        type:"get",
        async:false,
        success:function(data){
            option1 = {
                title : {
                    text: '用户注册量信息展示',
                    subtext: '注册人数/周',
                    x:'center'
                },
                xAxis: {
                    type: 'category',
                    data: ['前14-21天', '前7-14天', '前0-7天']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [data.farSeven,data.middleSeven, data.nearSeven],
                    type: 'line'
                }]
            };

        }
    });*/
/*    if (option1 && typeof option1 === "object") {
        myChart1.setOption(option1, true);
    }*/
    <%--------------------不同时间段注册用户折线图结束-----------------------%>

    <%--------------------国内用户数量分布图开始-----------------------%>
    // 2.通过init方法初始化图表
 //   var myChina = echarts.init(document.getElementById('china'));
//    var option2=null;


    /*$.ajax({
        url:"${pageContext.request.contextPath}/user/selectUserCountMap",
        type:"get",
        async:false,
        success:function(data){
            console.info(data.str);
            option2 = {
                title : {
                    text: '用户地区分布',
                    left: 'center'
                },
                tooltip : {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data:['用户人数']
                },
                visualMap: {
                    min: 0,
                    max: 5000,
                    left: 'left',
                    top: 'bottom',
                    text:['高','低'],           // 文本，默认为数值文本
                    calculable : true
                },
                toolbox: {
                    show: true,
                    orient : 'vertical',
                    left: 'right',
                    top: 'center',
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                series : [
                    {
                        name: '用户人数',
                        type: 'map',
                        mapType: 'china',
                        roam: false,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data:data.str
                    }
                ]
            };

        }
    });*/


    // 3.使用刚指定的配置项和数据显示图表。
//    myChina.setOption(option2);

    <%--------------------国内用户数量分布图结束-----------------------%>

    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    option = null;

    var dom1 = document.getElementById("userCount");
    var myChart1 = echarts.init(dom1);
    var option1 = null;

    var myChina = echarts.init(document.getElementById('china'));
    var option2=null;

    $.ajax({
        url:"${pageContext.request.contextPath}/user/selectUserMsg",
        type:"get",
        async:false,
        success:function(data){
            //console.info(data.sex);
            option = {
                title : {
                    text: '男女人数信息展示',
                    subtext: '用户性别占比',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['男','女']
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:data.sex.boys, name:'男'},
                            {value:data.sex.girls, name:'女'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            option1 = {
                title : {
                    text: '用户注册量信息展示',
                    subtext: '注册人数/周',
                    x:'center'
                },
                xAxis: {
                    type: 'category',
                    data: ['前14-21天', '前7-14天', '前0-7天']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [data.users.farSeven,data.users.middleSeven,data.users.nearSeven],
                    type: 'line'
                }]
            };
            option2 = {
                title : {
                    text: '用户地区分布',
                    left: 'center'
                },
                tooltip : {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data:['用户人数']
                },
                visualMap: {
                    min: 0,
                    max: 5000,
                    left: 'left',
                    top: 'bottom',
                    text:['高','低'],           // 文本，默认为数值文本
                    calculable : true
                },
                toolbox: {
                    show: true,
                    orient : 'vertical',
                    left: 'right',
                    top: 'center',
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                series : [
                    {
                        name: '用户人数',
                        type: 'map',
                        mapType: 'china',
                        roam: false,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data:data.map.str
                    }
                ]
            };
        }
    });




    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

    if (option1 && typeof option1 === "object") {
        myChart1.setOption(option1, true);
    }

    myChina.setOption(option2);







    <!------------------ 实时展示用户数量柱状图开始-------------->

    // 实时获取用户男女数量柱状图
    // 1.基于准备好的dom，初始化echarts实例
    var myChartTest1 = echarts.init(document.getElementById('test1'));

    var optionTest1=null;
    var goEasy = new GoEasy({
        appkey:"BC-c0b38464b66745de9148b11bcb5612dd"
    });
    goEasy.subscribe({
        channel:"sexcount",
        onMessage:function (message) {
            //console.info("通道:" + message.sexcount + "发布内容:" + message.content)
            var number=JSON.parse(message.content);
            console.info(number);
            // 2.指定图表的配置项和数据
            optionTest1 = {
                title: {
                    text: '用户男女比例'
                },
                tooltip: {},
                legend: {
                    data:['人数']
                },
                xAxis: {
                    data: ["男","女"]
                },
                yAxis: {},
                series: [{
                    name: '人数',
                    type: 'bar',
                    data: number
                }]
            };
            // 3.使用刚指定的配置项和数据显示图表。
            myChartTest1.setOption(optionTest1);

        }
    });
    <!------------------ 实时展示用户数量柱状图结束-------------->


</script>

